<template>
  <div id="app">
    <el-container>
      <el-aside width="200px">
        <div class="logo-div">Budo Warehouse</div>

        <el-menu 
          @select="onSelect"
          :default-active="activeMenuIndex" >
          <el-menu-item v-for="(menu, i) in menus"
            :key="menu.title"
            :index="i + ''">
              {{menu.title}}
            </el-menu-item>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header>budo warehouse Header</el-header>

        <el-main>
          <router-view></router-view>
        </el-main>
        <el-footer>
          @2020 budo {{new Date()}}
        </el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "app",

  data : () => {
    return {
      activeMenuIndex : '-1',

      menus : [
        { title : "主页", url : "/" },
        { title : "节点", url : "DataNode" },
        { title : "通道", url : "Pipeline" },
        { title : "EntryBuffer", url : "EntryBuffer" },
        { title : "FieldMapping", url : "FieldMapping" },
        { title : "LogPosition", url : "LogPosition" },
        { title : "BinaryLogs", url : "BinaryLogs" },
        { title : "MysqlGrant", url : "MysqlGrant" },
        { title : "Accesslog", url : "Accesslog" },
        { title : "关于", url : "About" }
      ]
    };
  },

  mounted() {
    setTimeout(this.activeMenu, 1000);
  },

  methods : {
    activeMenu() {
      for ( var i = 0; i < this.menus.length; i++ ) {
        var _path = this.$route.path;
        var _url = this.menus[i].url;

        if ( _url == _path || ( '/' + _url ) == _path ) {
          this.activeMenuIndex = i + "";
          break;
        }
      }
    },

    onSelect(index) {
      var _url = this.menus[index].url;
      if ( _url.startsWith("https://") ) {
        window.open (_url);
        return;
      }

      if ( "/" + this.$route.path == _url ) {
        return;
      }

      this.$router.push({ path :  _url});
    }
  }
};
</script>

<style>
.el-header, .el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 45px;
  height: 45px!important;
}

.logo-div {
  background: #649dbe;
  height: 45px;
  line-height: 45px;
}

.el-aside {
  text-align: center;
  height: 100%;
  background-color: #e5e2e2;
}

.el-menu {
  background-color: #e5e2e2!important;
  border-right-width : 0!important;
}

.el-menu-item {
  height: 45px!important;
  line-height: 45px!important;
}

.el-menu-item.is-active {
  background-color: #8F8F8F!important;
}

.el-main {
  background-color: #fdfeff;
  color: #333;
  text-align: center;
  line-height: 40px;
}

.el-container {
  height: 100vh;
}

body {
  margin: 0;
}
</style>
